<template>
    <div class="content">
        <div class="control-box">

            <div></div>
            <div class="control-right">
                <el-input type="text" v-model="searchStr" class="search-input" @keyup.enter="handleEnter"
                    placeholder="请输入用户名称或反馈内容"></el-input>
                <el-button type="primary" @click="searchHandle">查询</el-button>
            </div>

        </div>
        <div class="table-box">
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="Id" width="80" />
                <el-table-column prop="name" label="用户名称" width="180" />
                <el-table-column prop="subject" width="100" label="主题" />
                <el-table-column prop="phone" width="180" label="手机号" />
                <el-table-column prop="message" width="480" label="反馈内容" />

                <el-table-column fixed="right" label="创建时间" width="180">
                    <template #default="scope">
                        <div>{{ this.FormatDate(scope.row.createTime) }}</div>
                    </template>
                </el-table-column>


                <el-table-column fixed="right" label="操作" min-width="120" prop="id">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                            删除
                        </el-button>
                        <el-button link type="primary" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paging-box">
                <el-pagination layout="total, prev, pager, next" background :total="totalNum"
                    :default-page-size="pageSize" @change="pagingChange" />
            </div>

        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'


export default {
    name: 'HomePage',
    components: {},
    data() {
        return {
            tableData: [],
            totalNum: 0,
            searchStr: '',
            pageSize: 16,
            pageIndex: 1
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            let _this = this;
            this.$axios({
                method: 'post',
                url: '/api/feedback/feedbackList',
                data: { searchStr: this.searchStr, pageSize: this.pageSize, pageIndex: this.pageIndex }
            }).then(res => {
                console.log(res);
                _this.tableData = res.data.data.data;
                _this.totalNum = res.data.data.totalNum;
            })
        },

        FormatDate(date) {
            return this.$moment(date).format('YYYY-MM-DD HH:mm:ss');
        },

        handleClick(row) {

            let _this = this;

            ElMessageBox.confirm(
                '是否删除该条反馈?',
                '提醒',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    _this.$axios({
                        method: 'post',
                        url: '/api/feedback/deleteFeedback',
                        data: { id: row.id }
                    }).then(res => {
                        if (res.data.code == 0) {
                            ElMessage({
                                type: 'success',
                                message: '删除成功',
                            })
                            _this.getList();
                        }

                    })

                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    })
                })

        },


        searchHandle() {
            this.getList();
        },

        handleEnter() {
            this.getList();
        },

        searchStrChange(e) {
            console.log(e);
        },

        selectable() {
            console.log(';;')
        },


        pagingChange(e) {
            console.log(e);

            this.pageIndex = e;

            this.getList()
        }
    }
}
</script>

<style scoped lang="less">
.content {
    width: 100%;
    padding: 0 10px;

    .control-box {
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;

        .control-right {
            .search-input {
                margin-right: 10px;
                height: 30px;
                line-height: 30px;
                width: 300px;
                padding: 0 5px;
            }
        }
    }

    .table-box {
        width: 100%;

        .paging-box {
            position: absolute;
            margin-top: 10px;
            right: 60px;
            bottom: 50px;
        }
    }
}
</style>